//商票质押审批通过页面
<template>
  <div class="contents">
    <span class="back" @click="goBack">返回上一页</span>
    <!-- 一楼 -->
    <div class="f1">
      <div class="title" v-if="projectMessage">
        <p>{{ projectMessage.oderid }}</p>
        <h5
          :class="{
            spz: projectMessage.status == '审批中',
            sptg: projectMessage.status == '审批通过',
            spjj: projectMessage.status == '审批拒绝',
            djf: projectMessage.status == '待缴费',
            dfk: projectMessage.status == '待放款',
            yfk: projectMessage.status == '已放款',
            yyq: projectMessage.status == '已逾期',
            zcjx: projectMessage.status == '正常结项',
            yqjx: projectMessage.status == '逾期结项',
            yqx: projectMessage.status == '已取消'
          }"
        >
          {{ projectMessage.status }}
        </h5>
        <h5 style="background-color: #ff6060">质押</h5>
      </div>
      <!-- 产品信息 -->
      <div class="details" v-if="projectMessage">
        <div class="details-item">
          <div class="details-item-left">
            <ul>
              <li>产品名称：</li>
              <li>产品类型：</li>
            </ul>
            <div>
              <p>{{ projectMessage.productname }}</p>
              <p>{{ projectMessage.producttype | getData }}</p>
            </div>
          </div>
          <div class="details-item-left">
            <ul>
              <li>金融机构：</li>
              <li>质押利率（%）：</li>
            </ul>
            <div style="width: 310px">
              <p>{{ projectMessage.orgname | getData }}</p>
              <p>
                {{ projectMessage.radio | getArea }}
                <i v-show="projectMessage.radio">%</i>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 二楼 -->
    <div class="f2">
      <!-- 顶部标签 -->
      <div class="title">
        <h3>
          <span>项目信息</span>
        </h3>
      </div>
      <div class="titles">
        <h1></h1>
        <h3>项目进度</h3>
      </div>
      <div class="schedule" v-if="findxmjd">
        <div class="schedule1">
          <img src="@/assets/shangpiao/组194.png" alt="" />
          <h1
            :class="{
              dfk: findxmjd.b == 'null'
            }"
          ></h1>
          <img
            :src="require(`@/assets/shangpiao/组${findxmjd.b == 'null' ? '195' : '194'}.png`)"
            alt=""
          />
          <h1
            :class="{
              dfk: findxmjd.c == null
            }"
          ></h1>
          <img
            :src="require(`@/assets/shangpiao/组${findxmjd.c == null ? '195' : '194'}.png`)"
            alt=""
          />
        </div>
        <div class="schedule2">
          <div
            class="state"
            :class="{
              jj: findxmjd.statu == '拒绝',
              yqx: findxmjd.statu == '已取消',
              yyq: findxmjd.statu == '已逾期',
              yfk: findxmjd.statu == '已放款'
            }"
            v-if="findxmjd.statu != 'null'"
          >
            {{ findxmjd.statu }}
          </div>
          <span>业务申请</span>
          <h2></h2>
          <span
            :class="{
              dfk: findxmjd.b == 'null'
            }"
            >项目审批</span
          >
          <h2></h2>
          <span
            :class="{
              dfk: findxmjd.c == null
            }"
            >项目结项</span
          >
        </div>
        <div class="schedule3">
          <span>{{ findxmjd.a }}</span>
          <h3></h3>
          <span>{{ findxmjd.b == 'null' ? '' : findxmjd.b }}</span>
          <h3></h3>
          <span>{{ findxmjd.c == null ? '' : findxmjd.c }}</span>
        </div>
      </div>
      <!-- 票据信息表格 -->
      <!-- <div class="f2-f2" v-if="a"> -->
      <div class="titles">
        <h1></h1>
        <h3>项目详情</h3>
      </div>
      <!-- 融资信息-->
      <h2>
        票据信息
        <span @click="checkApply">
          <el-image style="width: 19px; height: 14px" :src="icon" :preview-src-list="imgData">
          </el-image>
        </span>
      </h2>
      <div class="details-item" v-if="b">
        <div class="details-item-left">
          <ul style="position: relative">
            <li>票据号码：</li>
            <li>票面金额（元）：</li>
            <li>票据到期日：</li>
          </ul>
          <div>
            <p>{{ b.billnumber | getData }}</p>
            <p>{{ b.faceamount | getArea }}</p>
            <p>{{ b.billdate | getDate }}</p>
          </div>
        </div>
        <div class="details-item-left">
          <ul>
            <li>承兑人名称：</li>
            <li>票据剩余天数：</li>
          </ul>
          <div style="width: 300px">
            <p>{{ b.acceptorname | getData }}</p>
            <p>{{ list.residualdate }}</p>
          </div>
        </div>
      </div>
      <!--发票信息-->
      <h2>发票信息</h2>
      <el-table
        :data="InvoiceList"
        border
        highlight-current-row
        stripe
        type="index"
        style="width: 100%"
        :header-cell-style="{
          background: '#F1F5FF',
          color: '#4D4D4D'
        }"
      >
        <el-table-column prop="number" label="序号" min-width="3%" align="center">
        </el-table-column>
        <el-table-column prop="invCode" label="发票代码" min-width="8%" align="center">
        </el-table-column>
        <el-table-column prop="invNo" label="发票编号" min-width="8%" align="center">
        </el-table-column>
        <el-table-column prop="invAmount" label="发票金额（元）" min-width="5%" align="center">
          <template slot-scope="scope">
            {{ scope.row.invAmount | getArea }}
          </template>
        </el-table-column>
        <el-table-column prop="currency" label="币种" min-width="3%" align="center">
        </el-table-column>
        <el-table-column prop="invDate" label="开票日期" min-width="5%" align="center">
          <template slot-scope="scope">
            {{ scope.row.invDate | getDate }}
          </template>
        </el-table-column>
        <el-table-column prop="applyid" label="合同编码" min-width="5%" align="center">
        </el-table-column>
        <el-table-column label="发票详情" min-width="4%" align="center">
          <template slot-scope="scope">
            <span
              class="span"
              @click="checkSuccess(scope.$index, InvoiceList)"
              type="text"
              size="small"
            >
              查看
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--合同信息-->
      <h2>合同信息</h2>
      <el-table
        :data="contractList"
        border
        highlight-current-row
        stripe
        type="index"
        style="width: 100%"
        :header-cell-style="{
          background: '#F1F5FF',
          color: '#4D4D4D'
        }"
      >
        <el-table-column prop="number" label="序号" min-width="2%" align="center">
        </el-table-column>
        <el-table-column prop="conNo" label="合同编号" min-width="8%" align="center">
        </el-table-column>
        <el-table-column prop="conName" label="合同名称" min-width="8%" align="center">
        </el-table-column>
        <el-table-column prop="conAmount" label="合同金额（元）" min-width="5%" align="center">
          <template slot-scope="scope">
            {{ scope.row.conAmount | getArea }}
          </template>
        </el-table-column>
        <el-table-column prop="currency" label="币种" min-width="5%" align="center">
        </el-table-column>
        <el-table-column label="合同详情" min-width="4%" align="center">
          <template slot-scope="scope">
            <span
              class="span"
              @click="checkSuccess(scope.$index, contractList)"
              type="text"
              size="small"
            >
              查看
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--融资信息-->
      <h2>融资信息</h2>
      <div class="details-item" v-if="projectMessage">
        <div class="details-item-left">
          <ul style="width: 180px; position: relative">
            <li>金融机构：</li>
            <li>产品名称：</li>
            <li>产品类型：</li>
            <li>借款利率（年化）：</li>
            <li>担保费率（年化）：</li>
            <li>担保服务费（元）：</li>
          </ul>
          <div style="width: 290px">
            <p>{{ projectMessage.orgname | getData }}</p>
            <p>{{ projectMessage.productname | getData }}</p>
            <p>{{ projectMessage.producttype | getData }}</p>
            <p>
              {{ projectMessage.radio | getArea }}
              <i v-show="projectMessage.radio">%</i>
            </p>
            <p>
              {{ a.guaranteerate | getArea }}
              <i v-show="a.guaranteerate">%</i>
            </p>
            <p>{{ a.guaranteefee | getArea }}</p>
          </div>
        </div>
        <div class="details-item-left">
          <ul style="width: 200px">
            <li>预计到账金额（元）：</li>
            <li>预计退回尾款（元）：</li>
            <li>借款期限（月）：</li>
            <li>放款日期：</li>
            <li>技术服务费率（年化）：</li>
            <li>技术服务费（元）：</li>
          </ul>
          <div style="width: 180px">
            <p>{{ a.financingamount | getArea }}</p>
            <p>{{ a.returnmount | getArea }}</p>
            <p>{{ a.deadline | getData }}</p>
            <p>{{ a.loandate | getDate }}</p>
            <p>
              {{ a.technicalservicerate | getArea }}
              <i v-show="a.technicalservicerate">%</i>
            </p>
            <p>{{ a.technicalservice | getArea }}</p>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </div>
    <!-- 查看票据正反面信息 -->
    <el-dialog title="票面信息" :visible.sync="contractCardbackVisible" width="40%" center>
      <!-- 内容区域 -->
      <div
        v-viewer
        v-if="frontImg.length != 0"
        style="text-align: center; width: 300px; height: 300px"
        class="dialog-center"
        @click="contractCardbackVisible = false"
      >
        <img
          v-for="(item, index) in frontImg"
          :key="index"
          style="width: 100%; height: 100%; margin-bottom: 15px"
          :src="item.path"
          alt=""
        />
        <!-- <img style="width: 100%; height: 100%" :src="reverseImg" alt="" /> -->
        <p style="margin-top: 20px">点击图片可查看大图</p>
      </div>
      <div v-else style="text-align: center; margin-bottom: 30px" class="dialog-center">
        <h4>暂无票据资料</h4>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="contractCardbackVisible = false">
          取 消
        </button>
        <button class="dialog-footer-bnt btn2" @click="contractCardbackVisible = false">
          确 定
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findSP, getFilePath, myPostFetch } from '@/utils'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      icon: 'http://operate.thunlink.cn/protocol/image/票.png',
      imgData: null,
      status: '',
      oderid: '',
      //产品数据
      row: 1,
      id: '', //项目id
      spid: '',
      frontImg: [], //票据正面
      contractCardbackVisible: false, //弹出框
      projectMessage: null, // 产品信息
      a: null,
      b: null,
      list: null,
      findxmjd: null, //审批进度
      InvoiceList: null,
      contractList: null
    }
  },
  // 计算属性
  computed: {
    ...mapState(['shangPiaoDetailsParameter'])
  },
  mounted() {
    // 获取地址栏中的id
    this.id = this.shangPiaoDetailsParameter.id
    this.spid = this.shangPiaoDetailsParameter.spid
    this.findSP()
    this.getInvoice()
    this.getContract()
    this.getFindxmjd()
    setTimeout(() => {
      this.checkApply()
    }, 500)
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (value == 0) return '-'
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getDate: function (value) {
      if (!value) return '-'
      let date = value.split(' ')[0]
      return date
    },
    getData: function (value) {
      if (!value || value == '') {
        return '-'
      } else {
        return value
      }
    },
    getInte: function (value) {
      if (value) {
        return parseInt(value)
      } else {
        return '未填写'
      }
    }
  },
  methods: {
    // 项目进度
    async getFindxmjd() {
      let url = '/api/BusinessSPs/findxmjd'
      let params = {
        applyid: this.id
      }
      let data = await myPostFetch(url, params)
      if (data.code == 100) {
        let date = data.data.b.split('@')[0]
        let b = data.data.b.split('@')[1]
        this.findxmjd = data.data
        this.findxmjd.b = date
        this.findxmjd.statu = b
      }
    },
    async findSP() {
      let data = await findSP(this.spid, this.id)
      if (data.data.businessSPinfo) {
        this.oderid = data.data.oderid
        this.projectMessage = data.data
        this.a = data.data.businessSPinfo
        this.b = data.data.sPticketinfos[0]
        this.list = data.data.list[0]
        // for (let i = 0; i < this.applyData.length; i++) {
        //   if (this.applyData[i].id == data.data.list[i].id) {
        //     this.applyData[i].pjsyts = data.data.list[i].residualdate;
        //   }
        //   this.applyData[i].number = i + 1;
        // }
      } else {
        this.$Message.error('数据错误')
      }
    },
    // 获取发票信息 /api/Invoice/getInvoice
    async getInvoice() {
      let url = '/api/Invoice/getInvoice'
      let params = {
        applyid: this.id
      }
      let data = await myPostFetch(url, params)
      if (data.code == 100) {
        this.InvoiceList = data.data
        for (let i = 0; i < this.InvoiceList.length; i++) {
          this.InvoiceList[i].number = i + 1
        }
      }
    },
    // 获取合同信息
    async getContract() {
      let url = '/api/TblContract/getContract'
      let params = {
        applyid: this.id
      }
      let data = await myPostFetch(url, params)
      if (data.code == 100) {
        this.contractList = data.data
        for (let i = 0; i < this.contractList.length; i++) {
          this.contractList[i].number = i + 1
        }
      }
    },
    async checkApply() {
      let id = this.id
      let a = []
      let { data } = await getFilePath(id)
      if (data) {
        if (data.length == 0) return this.$Message.error('暂无票据信息')
        for (let i = 0; i < data.length; i++) {
          a.push(data[i].path)
        }
        this.imgData = a
      }
    },
    // 点击表格查看
    async checkSuccess(index, row) {
      let objectno = row[index].id
      let { data } = await getFilePath(objectno)
      if (data.length != 0) {
        const imgUrlStr = data[0].path
        fetch(imgUrlStr).then(res =>
          res.blob().then(blob => {
            const a = document.createElement('a'), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = data[0].name
            a.href = url
            a.download = filename
            a.click()
            window.URL.revokeObjectURL(url)
          })
        )
      } else {
        this.$message.warning('暂无资料，无法查看')
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
      setTimeout(() => {
        this.$router.go(0)
      }, 50)
    },
    changeHash(idName) {
      document.querySelector(idName).scrollIntoView(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.contents {
  display: flex;
  flex-direction: column;

  width: 100%;
  background-color: rgb(242, 244, 247);
  // 返回上一页
  .back {
    position: absolute;
    left: 30vw;
    top: 0.599rem;
    font-size: 0.0833rem;
    color: #3f6ef2;
    text-decoration: underline;
    user-select: none;
  }
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 0.3958rem;
    font-size: 0.0833rem;
    background-color: rgb(242, 244, 247);
    .icon {
      margin: 0 0.0521rem 0 0.0208rem;
    }
    .span {
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    img {
      width: 0.0938rem;
      height: 0.0938rem;
      margin-right: 0.026rem;
    }
  }

  .f1 {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    border-radius: 6px;
    padding: 0.1563rem 0.2604rem 0 0.2604rem;
    margin-bottom: 0.0521rem;
    height: 0.7813rem;
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.125rem;
      p {
        font-size: 0.1042rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #000;
      }
      h5 {
        box-sizing: border-box;
        padding: 1px 4px;
        background: #3cb0ff;
        border-radius: 0.0104rem;
        font-size: 0.0677rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 0.0938rem;
        margin-left: 0.0417rem;
      }
    }
    // <!-- 产品详细信息开始 -->
    .details {
      width: 100%;
      margin-left: 10px 10px;
      .details-item {
        display: flex;
        width: 100%;

        .details-item-left {
          display: flex;
          width: 600px;
          height: 100%;
          ul {
            width: 180px;
            height: 100%;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            li {
              margin-top: 0.0625rem;
              height: 0.1563rem;
              background-color: #fff;
            }
          }
          div {
            width: 250px;
            height: 100%;
            margin-left: 0.0625rem;
            // overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            z-index: 99;
            p {
              height: 0.1563rem;
              font-size: 0.0938rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #000;
              margin-top: 0.0625rem;
            }
          }
        }
      }
    }
  }
  .f2 {
    overflow: hidden;
    width: 100%;
    height: 730px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.0313rem;
    padding: 0.1823rem 0.2604rem;
    scroll-behavior: smooth;
    overflow: auto;
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.3125rem;
      z-index: 99;
      margin-bottom: 0.2344rem;
      h3 {
        font-size: 0.125rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #222222;
        height: 0.1667rem;
        line-height: 0.1458rem;
        text-align: center;
        box-sizing: border-box;
      }
    }
    // 进度
    .schedule {
      width: 100%;
      margin: 0.2604rem 0;
      .schedule1 {
        box-sizing: border-box;
        padding: 0 0.2344rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 0.1823rem;

        img {
          width: 0.1823rem;
        }
        h1 {
          width: 2.4323rem;
          height: 0.0052rem;
          background: #3f6ef2;
          &.dfk {
            background: #a4a4a4;
          }
        }
      }
      .schedule2 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        box-sizing: border-box;
        padding: 0 0.1823rem;
        width: 100%;
        height: 0.1823rem;
        h2 {
          width: 2.3438rem;
          height: 0.0052rem;
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #3f6ef2;
          &.dfk {
            color: #a4a4a4;
          }
        }
        .state {
          box-sizing: border-box;
          padding: 0px 4px;
          display: flex;
          justify-content: center;
          justify-items: center;
          position: absolute;
          left: 54%;
          // width: 0.2083rem;
          // height: 0.1042rem;
          background: #22b556;
          opacity: 0.8;
          border-radius: 0.0104rem;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          &.jj {
            background: #fc6464;
          }
          &.spz {
            background: #3f6ef2;
          }
          &.sptg {
            background: #48b8a7;
          }
          &.spjj {
            background: #ff6060;
          }
          &.dfk {
            background: #f19149;
          }
          &.yfk {
            background: #13b5b1;
          }
          &.yyq {
            background: #ec6941;
          }
          &.zcjx {
            background: #80c269;
          }
          &.yqjx {
            background: #448aca;
          }
          &.yqx {
            background: #556fb5;
          }
          &.djf {
            background: #6291fa;
          }
        }
      }
      .schedule3 {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 0.1823rem;
        h3 {
          width: 1.9271rem;
          height: 0.0052rem;
        }
        span {
          display: block;
          width: 160px;
          text-align: center;
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #8d93a1;
        }
      }
    }
    .titles {
      display: flex;
      align-items: center;
      height: 0.1563rem;
      margin: 30px 0;
      h1 {
        height: 0.1042rem;
        width: 0.0313rem;
        background-color: #e8903c;
      }
      h3 {
        font-size: 0.1042rem;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #e8903c;
        margin-left: 0.0625rem;
      }
    }
    .null {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 310px;
      img {
        width: 326px;
        height: 212px;
      }
      discount p {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
        a {
          color: #3f6ef2;
          cursor: pointer;
        }
        span {
          color: #3f6ef2;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
    .enquiry {
      display: flex;
      margin: 10px 15px;

      .enquiry-item {
        display: flex;
        width: 48%;
        height: 100%;
        ul {
          width: 170px;
          height: 100%;
          font-size: 15px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          li {
            margin-top: 10px;
            height: 30px;
            background-color: #fff;
          }
        }
        div {
          width: 280px;
          height: 100%;
          margin-left: 15px;
          p {
            height: 30px;
            font-size: 15px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000;
            margin-top: 10px;
          }
        }
      }
    }
    h2 {
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #000000;
      margin: 0.151rem 0 0.0521rem 0;
      span {
        img {
          margin-right: 0.026rem;
          margin-top: -0.0208rem;
        }
        cursor: pointer;
        margin-left: 0.0781rem;
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        text-decoration: underline;
        color: #3f6ef2;
      }
    }
    // 基本信息
    .details-item {
      // background-color: #f00;
      display: flex;
      // justify-content: space-around;
      margin: 0.0521rem 0px;
      .details-item-left {
        display: flex;
        width: 3.125rem;
        height: 100%;
        ul {
          // background: #f00;
          width: 0.7813rem;
          height: 100%;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          li {
            margin-top: 0.0781rem;
            height: 0.1563rem;
            background-color: #fff;
          }
        }
        div {
          height: 100%;
          margin-left: 0.0781rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          z-index: 99;
          p {
            height: 0.1563rem;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000000;
            margin-top: 0.0781rem;
          }
        }
      }
    }
    // 表格编辑/查看
    .span {
      display: inline-block;
      width: 30px;
      height: 24px;
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #3f6ef2;
      border-bottom: 1px solid #3f6ef2;
      cursor: pointer;
    }
    // }
  }
  // 弹出框
  .dialog-center {
    width: 90%;
    margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 15px;
    .file {
      font-size: 15px;
      margin-right: 10px;
      color: #3f6ef2;
      text-decoration: underline;
      cursor: pointer;
    }
    .file1 {
      color: #999;
    }
  }
  // 弹出框
  .dialog-center {
    margin: 0 auto;
    width: 90%;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
    }
  }
}
</style>
<style lang="scss">
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
  }
  .cell {
    font-size: 16px;
  }
}
.el-table tr {
  height: 40px;
}
.el-table thead {
  height: 40px;
}
.el-button--small {
  padding: 0;
}
/* 输入框样式  */
.el-input__inner {
  box-sizing: border-box;
  width: 280px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
}
/* 邀请客户弹窗 */
.el-dialog--center .el-dialog__body {
  padding: 25px 0 30px;
}
.el-form-item__label {
  padding-right: 6px !important;
}
</style>
